<template>
<div id="app">
    <!-- 侧边栏菜单 -->
    <van-popup v-model="showSidebar" position="left" :style="{ width: '80%', height: '100%' }" :overlay="true"
        :close-on-click-overlay="true">
        <div class="sidebar-menu">
            <div class="sidebar-menu-items">
                <div class="menu-item" @click="goToPage('discover')">
                    <van-icon name="friends-o" size="24" />
                    <span>广场</span>
                </div>
                <div class="menu-item" @click="goToPage('creator')">
                    <van-icon name="bulb-o" size="24" />
                    <span>创作者中心</span>
                </div>
                <div class="menu-item" @click="goToPage('drafts')">
                    <van-icon name="notes-o" size="24" />
                    <span>我的草稿</span>
                </div>
                <div class="menu-item" @click="goToPage('comments')">
                    <van-icon name="comment-o" size="24" />
                    <span>我的评论</span>
                </div>
                <div class="menu-item" @click="goToPage('history')">
                    <van-icon name="clock-o" size="24" />
                    <span>浏览记录</span>
                </div>
                <div class="menu-item" @click="goToPage('orders')">
                    <van-icon name="orders-o" size="24" />
                    <span>订单</span>
                </div>
                <div class="menu-item" @click="goToPage('cart')">
                    <van-icon name="cart-o" size="24" />
                    <span>购物车</span>
                </div>
                <div class="menu-item" @click="goToPage('wallet')">
                    <van-icon name="balance-o" size="24" />
                    <span>钱包</span>
                </div>
                <div class="menu-item" @click="goToPage('community')">
                    <van-icon name="cluster-o" size="24" />
                    <span>社区公约</span>
                </div>
            </div>
            <div class="sidebar-bottom">
                <div class="bottom-item" @click="goToPage('scan')">
                    <van-icon name="scan" size="24" />
                    <span>扫一扫</span>
                </div>
                <div class="bottom-item" @click="goToPage('help')">
                    <van-icon name="service-o" size="24" />
                    <span>帮助与客服</span>
                </div>
                <div class="bottom-item" @click="goToPage('settings')">
                    <van-icon name="setting-o" size="24" />
                    <span>设置</span>
                </div>
            </div>
        </div>
    </van-popup>

    <router-view />

    <van-tabbar v-if="showTabBar" v-model="active" route>
        <van-tabbar-item to="/home" icon="home-o">首页</van-tabbar-item>
        <van-tabbar-item to="/square" icon="search">广场</van-tabbar-item>
        <van-tabbar-item to="/publish" icon="plus">
            <template #icon>
                <div class="publish-btn">
                    <van-icon name="plus" size="20" />
                </div>
            </template>
        </van-tabbar-item>
        <van-tabbar-item to="/message" icon="chat-o" :badge="unreadCount || ''">消息</van-tabbar-item>
        <van-tabbar-item to="/profile" icon="user-o">我的</van-tabbar-item>
    </van-tabbar>
</div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
    name: 'App',

    data() {
        return {
            showSidebar: false
        }
    },

    computed: {
        ...mapGetters(['notifications', 'notificationCount']),

        active: {
            get() {
                return this.$store.getters.tabbarActive
            },
            set(val) {
                this.$store.dispatch('setTabbarActive', val)
            }
        },

        // 是否显示底部标签栏
        showTabBar() {
            // 根据路由的meta信息决定是否显示底部标签栏
            return this.$route.meta && this.$route.meta.showTabBar !== false
        },

        // 未读消息数量
        unreadCount() {
            // 使用store中的通知计数
            return this.notificationCount || 0
        }
    },

    methods: {
        // 切换侧边栏显示状态
        toggleSidebar() {
            this.showSidebar = !this.showSidebar
        },

        // 页面跳转
        goToPage(page) {
            this.showSidebar = false

            switch (page) {
                case 'discover':
                    this.$router.push('/square')
                    break
                case 'creator':
                    // 创作者中心页面
                    this.$toast('创作者中心功能开发中')
                    break
                case 'drafts':
                    // 草稿页面
                    this.$toast('草稿功能开发中')
                    break
                case 'comments':
                    // 评论页面
                    this.$toast('评论功能开发中')
                    break
                case 'history':
                    // 浏览记录页面
                    this.$toast('浏览记录功能开发中')
                    break
                case 'orders':
                    // 订单页面
                    this.$toast('订单功能开发中')
                    break
                case 'cart':
                    // 购物车页面
                    this.$toast('购物车功能开发中')
                    break
                case 'wallet':
                    // 钱包页面
                    this.$toast('钱包功能开发中')
                    break
                case 'community':
                    // 社区公约页面
                    this.$toast('社区公约功能开发中')
                    break
                case 'scan':
                    // 扫一扫功能
                    this.$toast('扫一扫功能开发中')
                    break
                case 'help':
                    // 帮助与客服页面
                    this.$toast('帮助与客服功能开发中')
                    break
                case 'settings':
                    this.$router.push('/settings')
                    break
                default:
                    break
            }
        }
    },

    watch: {
        '$route'(to) {
            // 根据路由设置tabbar激活项
            if (to.path === '/home') {
                this.active = 0
            } else if (to.path === '/square') {
                this.active = 1
            } else if (to.path === '/publish') {
                this.active = 2
            } else if (to.path === '/message') {
                this.active = 3
            } else if (to.path === '/profile') {
                this.active = 4
            }
        }
    }
}
</script>

<style>
:root {
    /* 颜色变量 */
    --color-primary: #ff2442;
    --color-primary-light: #ff6b80;
    --color-primary-gradient: linear-gradient(to right, #ff2442, #ff6b80);

    --color-success: #07c160;
    --color-warning: #ff976a;
    --color-danger: #ee0a24;

    --color-text-primary: #323233;
    --color-text-regular: #666;
    --color-text-secondary: #999;
    --color-text-placeholder: #c8c9cc;

    --color-border: #ebedf0;
    --color-background: #f7f8fa;
    --color-white: #ffffff;

    /* 字体大小 */
    --font-size-mini: 10px;
    --font-size-small: 12px;
    --font-size-normal: 14px;
    --font-size-medium: 16px;
    --font-size-large: 18px;

    /* 字体粗细 */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 600;

    /* 圆角 */
    --border-radius-small: 4px;
    --border-radius-medium: 8px;
    --border-radius-large: 12px;

    /* 阴影 */
    --box-shadow-light: 0 2px 8px rgba(0, 0, 0, 0.04);
    --box-shadow-regular: 0 4px 12px rgba(0, 0, 0, 0.08);
    --box-shadow-heavy: 0 8px 16px rgba(0, 0, 0, 0.12);
}

#app {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
        Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--color-text-primary);
    min-height: 100vh;
    background-color: var(--color-background);
}

/* 侧边栏菜单样式 */
.sidebar-menu {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #fff;
    padding: 20px 0;
}

.sidebar-menu-items {
    flex: 1;
    overflow-y: auto;
}

.menu-item,
.bottom-item {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    color: var(--color-text-primary);
}

.menu-item .van-icon,
.bottom-item .van-icon {
    margin-right: 12px;
    color: var(--color-text-regular);
}

.sidebar-bottom {
    border-top: 1px solid var(--color-border);
    padding-top: 16px;
}

.publish-btn {
    width: 40px;
    height: 30px;
    background: var(--color-primary-gradient);
    border-radius: 25%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 2px 8px rgba(255, 36, 66, 0.3);
}

/* 修改Vant默认样式 */
.van-tabbar-item--active {
    color: var(--color-primary) !important;
}

.van-nav-bar__title {
    color: var(--color-text-primary) !important;
}

.van-button--primary {
    background: var(--color-primary-gradient) !important;
    border: none !important;
}

/* 通用样式 */
.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ellipsis-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ellipsis-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
</style>